$(function (){
    
    // 获取初始化信息
    chrome.storage.sync.get(['messageType', 'excludeSiteList']).then((result) => {
        MESSAGE_TYPE = result.messageType;
        EXCLUDE_SITE_LSIT = result.excludeSiteList;
    });

    // 排除网站搜索结构-采用倒序排除
    function excludeSite(){
        for(var i = $("#content_left>div").length - 1;i >= 0;i --){
            let mu = $("#content_left>div").eq(i).attr("mu");
            if(mu != undefined){
                mu = mu.substr(mu.indexOf("//") + 2);
                mu = mu.substr(0, mu.indexOf("/"));
                if($.inArray(mu, EXCLUDE_SITE_LSIT) !== -1){
                    $("#content_left>div").eq(i).remove();
                }
            }
        }
    }

    // 等待内容显示时，才进行排除操作
    function main(){
        excludeSite();
        let waitConShow = setInterval(function (){
            let content = $("#content_left");
            if(content != undefined && content){
                // clearInterval(waitConShow);
                excludeSite();
            }
        }, 1000);
    }

    // 等待内容显示时，才进行排除操作
    let waitConShow = setInterval(function (){
        let content = $("#content_left");
        if(content != undefined && content){
            clearInterval(waitConShow);
            excludeSite();

            $("#su").click(function (){
                main();
            });

            $(document).keyup(function(e) {
                if (e.keyCode === 13) {
                    main();
                }
            });
        }
    }, 500);

    const data = [{value : 530.5 },{value : 93.6 },{value : 86.4 },{value : 84.0 },{value : 93.6 },{value : 98.4 },{value : 88.8 },{value : 84.0 },{value : 100.8 },{value : 93.6 },{value : 84.0 },{value : 88.8 },{value : 84.0 },{value : 88.8 },{value : 88.8 },{value : 86.4 },{value : 88.8 },{value : 84.0 },{value : 88.8 },{value : 86.4 },{value : 86.4 },{value : 91.2 },{value : 96.0 },{value : 96.0 },{value : 72.0 },{value : 90.0 },{value : 96.0 },{value : 78.0 },{value : 72.0 },{value : 100.0 }];
    setTimeout(function (){
        
        let svgHtml = HistogramChart({
            width: 1551,
            height: 114,
            yMaxValue: 600,
            yLabelWidth: 74,
            labelFontSize: 12,
            xLabelPaddingTop: 8
        });
        $(".highcharts-container").html(svgHtml);
    }, 1000);

    function generateChartData(
        horizontalAxisWidth,
        yMaxValue,
        verticalAxisHeight,
        yLabelWidth,
        coordinateLeftTopY,
    ) {
        const averageWidth = horizontalAxisWidth / (data.length * 2 + 2);
        const averageWidth1 = horizontalAxisWidth % (data.length * 2 + 2);
        return data.map((item, index) => {
            const tickPosition = averageWidth * (index * 2) + (yLabelWidth / 2) + averageWidth1;
            const barHeight = (item.value / yMaxValue) * verticalAxisHeight;
            return {
                tickPosition: tickPosition,
                barData: {
                    value: item.value,
                    barHeight: barHeight,
                    xPosition: tickPosition,
                    yPosition: coordinateLeftTopY + verticalAxisHeight - barHeight,
                    barWidth: averageWidth
                },
            };
        });
    }
   function getBar(chatData){
        let htmlStr = '<g>';
        chatData.map((item) => {
            htmlStr += '<g>'
            htmlStr += ' <rect'
            htmlStr += ' rx="2"'
            htmlStr += ' x=' + item.barData.xPosition
            htmlStr += ' y=' + (151.5 - item.barData.barHeight)
            htmlStr += ' height=' + item.barData.barHeight
            htmlStr += ' width=' + item.barData.barWidth
            htmlStr += ' fill="rgba(6, 84, 186, 0.6)"'
            htmlStr += '/>'
            htmlStr += '</g>';
        })
        htmlStr += '</g>';
        return htmlStr;
    }
   function getFixedConHtml(){
        let htmlStr = '<g class="highcharts-axis highcharts-yaxis " data-z-index="2"><text x="13.6640625" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 13.6640625 94)" class="highcharts-axis-title" style="color:#767676;font-size:12;fill:#767676;" y="94" aria-hidden="true"><tspan>按天显示销售额</tspan></text><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 74 37 L 74 151"></path></g>';
        htmlStr += '<text x="775" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:16;font-weight:bold;fill:#333333;" y="14" aria-hidden="true"><tspan>31 天销售数据图表</tspan></text>';
        htmlStr += '<g class="highcharts-axis highcharts-xaxis " data-z-index="2"><text x="812" data-z-index="7" text-anchor="middle" transform="translate(0,0)" class="highcharts-axis-title" style="color:#767676;font-size:12;fill:#767676;" y="195" aria-hidden="true"><tspan>月</tspan></text><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 74 151.5 L 1551 151.5"></path></g>';
        return htmlStr;
    }
   function HistogramChart(config) {
        const {
          width,
          height,
          yMaxValue,
          yLabelWidth,
          labelFontSize,
          xLabelPaddingTop,
        } = config;
        const coordinateLeftTopX = yLabelWidth;
        const coordinateLeftTopY = labelFontSize / 2;
        const verticalAxisHeight = height - coordinateLeftTopY - labelFontSize - xLabelPaddingTop;
        const horizontalAxisWidth = width - coordinateLeftTopX;
        const yCoordinateAxisNode = '<g><g key="100"><text x="66" y="36.6" fill="#828B94" font-size="12" dominantbaseline="central" text-anchor="end" style="color: #767676;">600</text></g><g key="50"><text x="66" y="94" fill="#828B94" font-size="12" dominantbaseline="central" text-anchor="end" style="color: #767676;">300</text></g><g key="0"><text x="66" y="151.5" fill="#828B94" font-size="12" dominantbaseline="central" text-anchor="end" style="color: #767676;">USD0</text></g></g>';
        const chatData = generateChartData(horizontalAxisWidth, yMaxValue, verticalAxisHeight, yLabelWidth, coordinateLeftTopY);
        const xCoordinateAxisNode = '<g class="highcharts-axis-labels highcharts-xaxis-labels " data-z-index="7"><text x="97.822580645161" style="color:#767676;cursor:default;font-size:12;white-space:nowrap;font-weight:200;fill:#767676;" text-anchor="middle" transform="translate(0,0)" y="171" opacity="1" aria-hidden="true"><tspan>5 月 11 日</tspan></text></g>';
        const barNode = getBar(chatData);
        return '<svg width=' + width + ' height=' + height + '>' + 
                yCoordinateAxisNode +
                xCoordinateAxisNode +
                barNode +
                getFixedConHtml() +
                '</svg>';
      }
    

    chrome.runtime.onMessage.addListener(
        function (request, sender, sendResponse){
            const data = request.data;
            if(request.type === MESSAGE_TYPE.UPDATE_EXCLUDE_SITE){
                // 重新获取
                chrome.storage.sync.get(['excludeSiteList']).then((result) => {
                    EXCLUDE_SITE_LSIT = result.excludeSiteList;
                });
            }
        }
    );
})